<template>
<div class="hello">
  <!-- 在template中this可以省略 -->
  <h1 @click="handleAdd">{{$store.state.count}}</h1>
  <h3 @click="handleAddN">获取全局变量的值：{{count}}</h3>
  <h2 @click="handle">Action异步获取全局数据:{{count}}</h2>
  <h4 @click="handleAsyN">带参Action异步获取全局数据:{{count}}</h4>
</div>
</template>

<script>
import {mapState} from 'vuex'
import {userRejister} from "@/request/api/user";

export default {
  name:"About",
  data(){
    return{
    }
  },
  computed:{
    ...mapState(['count'])
  },
  created() {
    this.onLoad();
  },
  methods:{
    //注册按钮触发注册请求方法
    registBtnListener(){
      Promise((resolve,reject)=>{
        userRejister(data)
        .then(response =>{
          console.log(response);
          resolve();
        })
        .catch(error =>{
          reject(error);
        })
      })
    },
    //触发 mutation
    handleAdd(){
      this.$store.commit('add');
    },
    handleAddN(){
      this.$store.commit('addN',6);
    },
    handle(){
      //触发Action
      console.log('异步触发');
      this.$store.dispatch('addAsyc');
    },
    handleAsyN(){
      console.log('异步触发带参Action');
      this.$store.dispatch('addAsycN',9);
    }
  }
}
</script>
